---
title: JavaScript Quickstart
description: Learn how to integrate c15t into your Javacript application with this step-by-step guide. We'll cover installation, configuration, and basic usage.
lastModified: 2025-04-17
tocStyle: steps
availableIn:
  - framework: 'react'
    url: '/docs/frameworks/react/quickstart'
    title: 'React'
  - framework: 'next'
    url: '/docs/frameworks/next/quickstart'
    title: 'Next.js'
---

## CLI Setup (Recommended)

<Steps>
  <Step>
    ### Generate Schema + Code

    <PackageCommandTabs command="@c15t/cli generate" />
  </Step>

  <Step>
    ### Run Database Migrations (Optional)

    <Callout type="note">
      This is only required if you are self-hosting c15t.
    </Callout>

    <PackageCommandTabs command="@c15t/cli migrate" />
  </Step>
</Steps>

## Manual Setup

<Steps>
  <Step>
    ### Install `c15t` Package

    <PackageCommandTabs mode="install" command="c15t" />
  </Step>

  <Step>
    ### Add to Your JavaScript Application

    ```tsx
    import { configureConsentManager, createConsentManagerStore } from 'c15t';

    export const consentManager = configureConsentManager({ mode: "c15t", backendURL: "https://your-instance.c15t.dev" });
    export const store = createConsentManagerStore(consentManager, {
      initialGdprTypes: ["necessary", "marketing"], // Optional: Specify which consent categories to show in the banner.
      ignoreGeoLocation: true // Useful for development to always view the banner.
    });
    ```

    The consent manager is now ready to use. For example:

    ```tsx
    store.getState().setConsent('marketing', true); // set consent to marketing
    store.getState().showPopup; // should show popup?
    ```

    <Callout type="tip">
      You can create an instance at [consent.io](https://consent.io) (recommended) or use c15t offline by setting `mode: 'offline'`.
    </Callout>
  </Step>
</Steps>

***

## Hosting Options

### Creating a consent.io Instance (Recommended)

<Callout type="info">
  Using consent.io is the recommended method as it is the easiest way to get started and requires little maintenance.
</Callout>

[consent.io](https://consent.io) provides a fully managed consent management service. This is the recommended method as it is the easiest way to get started and requires little maintenance.

<Steps>
  <Step>
    Sign up for a [consent.io](https://consent.io) account.
  </Step>

  <Step>
    After signing up, create a new instance, located in the top-right corner.

    <Callout type="info">
      When creating an instance it is important to list all the trusted origins for your application such as "localhost", your production domain, etc.
    </Callout>
  </Step>

  <Step>
    After the instance is created, you will be given a backendURL, which you can add to your `ConsentManagerOptions`.

    A backend URL might look like this: `https://<my-instance>.c15t.dev/`.
  </Step>
</Steps>

### Alternative Storage Options

<Callout type="note">
  For more advanced setup options, choose the approach that best suits your requirements.
</Callout>

For more advanced setup options, please refer to:

- [Overview](/docs/storing-consent/overview) - Compare different approaches to storing consent decisions in your application
- [Hosted c15t](/docs/storing-consent/hosted-c15t) - Complete guide to using consent.io
- [Offline Mode](/docs/storing-consent/offline-mode) - Complete guide to using c15t without a backend
- [Custom Client](/docs/storing-consent/custom-client) - Advanced implementation with custom handlers for full control

## Decision Guide

<Callout>
  Use this flowchart to determine which c15t configuration is best for your needs.
</Callout>

<Mermaid
  chart={`
flowchart TD
Start([Start here]) --> StoreConsent

StoreConsent{Need to store\nconsent choices?}
StoreConsent -->|Yes| ManagedService
StoreConsent -->|No| OfflineMode

ManagedService{Want a managed\nservice?}
ManagedService -->|Yes| ConsentIO
ManagedService -->|No| CustomClient

OfflineMode([c15t Offline Mode]):::optionStyle
OfflineMode -.-> OfflineNote[Client-side only\nStores in localStorage]:::noteStyle

ConsentIO([consent.io]):::recommendStyle
ConsentIO -.-> ConsentIONote[Fully managed\nSimplest setup]:::noteStyle

CustomClient([Custom Client]):::optionStyle
CustomClient -.-> CustomNote[Full control\nRequires implementation]:::noteStyle
`}
/>
